<template>
    <div>
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
              {{ scope.row.status === '1' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible" title="编辑用户信息">
        <el-form :model="formData" :rules="rules" ref="form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </el-dialog>
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
    </div>
  </template>
  
  <script>
  import { mapActions } from 'vuex';
  export default {
    data() {
      return {
        users: [
        { id: 1, username: '张三', phone: '13812345678', email: 'zhangsan@xxx.com', status: '启用' },
        { id: 2, username: '李四', phone: '13912345678', email: 'lisi@xxx.com', status: '停用' }

        ],
        dialogVisible: false,
        formData: {},
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
            { pattern: /^1\d{10}$/, message: '电话号码格式不正确', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
          tatus: [
      { required: true, message: '请选择状态', trigger: 'blur' }
    ]
  }
}
},
mounted() {
this.fetchUsers();
},
methods: {
...mapActions(['fetchUsers', 'createUser', 'updateUser', 'deleteUser']),
showAddDialog() {
    this.formData = {};
    this.dialogVisible = true;
},
editUser(user) {
    this.formData = { ...user };
    this.dialogVisible = true;
},
submitForm() {
this.$refs.form.validate(valid => {
    if (valid) {
        if (this.formData.id) {
            this.updateUser(this.formData).then(() => {
            this.dialogVisible = false;
            this.fetchUsers();
});
} 
else {
    this.createUser(this.formData).then(() => {
    this.dialogVisible = false;
    this.fetchUsers();
});
}
} 
else {
return false;
}
});
},
cancel() {
this.dialogVisible = false;
}
}
}
</script>   
  
  <style scoped>
  /* 这里可以定义一些组件样式 */
  </style>
  